<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>账户明细</span>
      </div>
    </div>
    <div class="pad_b_30 orderSeatch">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <template>
          <el-form-item label="账单类型：">
            <el-radio-group v-model="formInline.type" @change="selectType">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">外卖店内入账订单</el-radio-button>
              <el-radio-button label="2">买单订单入账</el-radio-button>
              <el-radio-button label="3">服务费扣除</el-radio-button>
              <el-radio-button label="4">提现申请</el-radio-button>
              <el-radio-button label="5">其他变动</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="查询日期：" class="mar_t20">
          <div class="flex-bet">
            <div>
              <span class="">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  <div class="outmain ba_f">
    <el-table
            :data="list"
            stripe
            style="width: 100%"
    class="tablecenter">
      <el-table-column
              prop="createdAt"
              label="时间"
      >
      </el-table-column>
      <el-table-column
          prop="outTradeNo"
          label="订单号"
      >
      </el-table-column>
      <el-table-column
              prop="item"
              label="类型"
      >
        <template slot-scope="scope">
          <div class="flex flex-center">
<!--            <div v-if="scope.row.note=='1'" class="txsq"><el-tag size="mini" type="success">外卖店内入账</el-tag></div>-->
<!--            <div v-if="scope.row.note=='2'" class="txsq"><el-tag size="mini" type="danger">提现申请</el-tag></div>-->
            <div class="txsq" v-if="scope.row.item=='2'" ><el-tag size="mini" type="danger">{{scope.row.note}}</el-tag></div>
            <div class="txsq" v-if="scope.row.item=='1'" ><el-tag size="mini" type="success">{{scope.row.note}}</el-tag></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="money"
              label="收入/支出"
      >
        <template slot-scope="scope">
          <div class="flex flex-center">
            <div v-if="scope.row.item=='2'" class="color-red wei">-{{ scope.row.money }}元</div>
            <div v-if="scope.row.item=='1'" class="color-green wei">+{{ scope.row.money }}元</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
              prop="currentMoney"
              label="账户余额"
      >
        <template slot-scope="scope">
          <div class="flex flex-center wei">
            {{scope.row.currentMoney}}元
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="origin"
          label="账单类型"
      >
        <template slot-scope="scope">
          <div class="flex flex-center">
            <div v-if="scope.row.origin=='1'">外卖</div>
            <div v-if="scope.row.origin=='2'">店内</div>
            <div v-if="scope.row.origin=='3'">快餐</div>
            <div v-if="scope.row.origin=='4'">当面付</div>
            <div v-if="scope.row.origin=='5'">券包</div>
            <div v-if="scope.row.origin=='6'">提现</div>
            <div v-if="scope.row.origin=='7'">提现拒绝</div>
            <div v-if="scope.row.origin=='8'">扣除服务费</div>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--              prop="cz"-->
<!--              label="操作"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <div class="flex flex-center">-->
<!--            <el-button type="text" @click="goodRecovery(scope.row)">查看</el-button>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.size"
        :current-page.sync='page.currentPage'
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import { storeBillList,} from '@/api/statistics';
import {changeDate} from "@/utils";
  export default {
    created() {
      if (this.$route.query.storeId) {
        this.storeId = this.$route.query.storeId;
        this.init();
      }
      // this.init();
    },
    data () {
      return {
        formInline: {
          time: [new Date().setDate(new Date().getDate() - 15),new Date()],
          type: '0',
        },
        tableData: [
          {
            sj:'2021-04-27 11:16',
            ddh:'20158296255554655',
            lx:'1',
            srzc:'1',
            zhye:'15.00',
          },
          {
            sj:'2021-04-27 11:16',
            ddh:'20158296255554655',
            lx:'2',
            srzc:'2',
            zhye:'25.00',
          },
        ],
        list: [],
        listLoading: false,
        selectRows: "",
        elementLoadingText: "正在加载...",
        page: {
          total: 0,
          size: 20,
          currentPage: 1,
        },
      }
    },
    methods: {
      async init() {
        var params = {
          page: this.page.currentPage,
          startTime:this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '',
          endTime:this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '',
          type: this.formInline.type,
          storeId: this.storeId,
        };
        const {data, count} = await storeBillList(params);
        this.list = data;
        this.page.total = count;
        this.bus.$emit('loading', false);
      },
      selectType() {
        this.init();
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.init();
      },
    },
  }
</script>
